<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%--
  *列表显示界面
  *author：lw
  *data: 2021/07/07
 --%>
<head>
    <title>Title</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


</head>

<body>
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_id</label>
                        <div class="col-sm-10">
                            <input type="text" name="userId" class="form-control" id="user_id_update_input"
                                   placeholder="user_id">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="userName" class="form-control" id="user_name_update_input"
                                   placeholder="user_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_role</label>
                        <div class="col-sm-10">
                            <input type="text" name="userRole" class="form-control" id="user_role_update_input"
                                   placeholder="user_role">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dept_id</label>
                        <div class="col-sm-10">
                            <input type="text" name="deptId" class="form-control" id="dept_id_update_input"
                                   placeholder="dept_id">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_dept</label>
                        <div class="col-sm-10">
                            <input type="text" name="userDept" class="form-control" id="user_dept_update_input"
                                   placeholder="user_dept">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">update_time</label>
                        <div class="col-sm-10">
                            <input type="text" name="updateTime" class="form-control" id="update_time_update_input"
                                   placeholder="update_time">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">create_time</label>
                        <div class="col-sm-10">
                            <input type="text" name="createTime" class="form-control" id="create_time_update_input"
                                   placeholder="create_time">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">update_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="updateName" class="form-control" id="update_name_update_input"
                                   placeholder="update_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">create_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="createName" class="form-control" id="create_name_update_input"
                                   placeholder="create_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dr</label>
                        <div class="col-sm-10">
                            <input type="text" name="dr" class="form-control" id="dr_update_input"
                                   placeholder="dr">
                            <span class="help-block"></span>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">user添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_id</label>
                        <div class="col-sm-10">
                            <input type="text" name="userId" class="form-control" id="user_id_add_input"
                                   placeholder="user_id">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="userName" class="form-control" id="user_name_add_input"
                                   placeholder="user_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_role</label>
                        <div class="col-sm-10">
                            <input type="text" name="userRole" class="form-control" id="user_role_add_input"
                                   placeholder="user_role">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user_dept</label>
                        <div class="col-sm-10">
                            <input type="text" name="userDept" class="form-control" id="user_dept_add_input"
                                   placeholder="user_dept">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dept_id</label>
                        <div class="col-sm-10">
                            <input type="text" name="deptId" class="form-control" id="dept_id_add_input"
                                   placeholder="dept_id">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">update_time</label>
                        <div class="col-sm-10">
                            <input type="text" name="updateTime" class="form-control" id="update_time_add_input"
                                   placeholder="update_time">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">create_time</label>
                        <div class="col-sm-10">
                            <input type="text" name="createTime" class="form-control" id="create_time_add_input"
                                   placeholder="create_time">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">update_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="updateName" class="form-control" id="update_name_add_input"
                                   placeholder="update_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">create_name</label>
                        <div class="col-sm-10">
                            <input type="text" name="createName" class="form-control" id="create_name_add_input"
                                   placeholder="create_name">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dr</label>
                        <div class="col-sm-10">
                            <input type="text" name="dr" class="form-control" id="dr_add_input"
                                   placeholder="dr">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!--页面主体-->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SpringBoot-CRUD</h1>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn" onclick="a1()">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>userId</th>
                    <th>userName</th>
                    <th>userRole</th>
                    <th>deptId</th>
                    <th>userDept</th>
                    <th>updateTime</th>
                    <th>createTime</th>
                    <th>updateName</th>
                    <th>createName</th>
                    <th>dr</th>
                    <th>deptName</th>
                    <th>addNum</th>
                    <th>操作</th>

                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">

    window.onload = function to_page() {


        $.ajax({
            url: "http://localhost:17793/User/selectAll",
            type: "GET",
            beforeSend: function (request) {
                var arrstr = document.cookie.split("; ");
                for (var i = 0; i < arrstr.length; i++) {
                    var temp = arrstr[i].split("=");
                    if (temp[0] == "token")
                        request.setRequestHeader("token", temp[1])
                }
            },
            success: function (result) {

                //1、解析并显示员工数据
                build_emps_table(result);

                var arrstr = document.cookie.split("; ");
                console.log(arrstr[3].split("="))
                var temp = arrstr[3].split("=");
                console.log(temp[1])
                temp[1] = ""
                console.log(temp[1])
                // for (var i = 0; i < arrstr.length; i++) {
                //     var temp = arrstr[i].split("=");
                //     if (temp[0] == "token")
                //
                //
                //     console.log(temp[1])
                // }

            }
        });
    }

    function build_emps_table(result) {
        //清空table表格
        $("#emps_table tbody").empty();
        var emps = result.obj;
        $.each(emps, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var userId = $("<td></td>").append(item.userId);
            var userName = $("<td></td>").append(item.userName);
            var userRole = $("<td></td>").append(item.userRole);
            var deptId = $("<td></td>").append(item.deptId);
            var userDept = $("<td></td>").append(item.userDept);
            var updateTime = $("<td></td>").append(item.updateTime);
            var createTime = $("<td></td>").append(item.createTime);
            var updateName = $("<td></td>").append(item.updateName);
            var createName = $("<td></td>").append(item.createName);
            var dr = $("<td></td>").append(item.dr);
            var deptName = $("<td></td>").append(item.deptName);
            var addNum = $("<td></td>").append(item.addNum);


            /**
             <button class="">
             <span class="" aria-hidden="true"></span>
             编辑
             </button>
             */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前员工各项信息
            editBtn.attr("edit-id", item.userId);
            editBtn.attr("edit-Name", item.userName);
            editBtn.attr("edit-Role", item.userRole);
            editBtn.attr("edit-deptId", item.deptId);
            editBtn.attr("edit-userDept", item.userDept);
            editBtn.attr("edit-updateTime", item.updateTime);
            editBtn.attr("edit-createTime", item.createTime);
            editBtn.attr("edit-updateName", item.updateName);
            editBtn.attr("edit-createName", item.createName);
            editBtn.attr("edit-dr", item.dr);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性来表示当前删除的员工id
            delBtn.attr("del-id", item.userId);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //var delBtn =
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(userId)
                .append(userName)
                .append(userRole)
                .append(deptId)
                .append(userDept)
                .append(updateTime)
                .append(createTime)
                .append(updateName)
                .append(createName)
                .append(dr)
                .append(deptName)
                .append(addNum)
                .append(btnTd)
                .appendTo("#emps_table tbody");
        });
    }

    $(document).on("click", ".delete_btn", function () {

        var empId = $(this).attr("del-id");
        if (confirm("确认删除吗？")) {
            $.ajax({
                url: "http://localhost:17793/User/delete",
                type: "GET",
                data: {"id": empId},
                success: function (result) {
                    alert("删除成功");
                    build_emps_table(result);
                }
            });

        }
    });

    <!--编辑员工信息-->
    $(document).on("click", ".edit_btn", function () {
        var empId = $(this).attr("edit-id");
        var empId1 = $(this).attr("edit-id1");

        $("#user_id_update_input").val($(this).attr("edit-id"));
        $("#user_name_update_input").val($(this).attr("edit-Name"));
        $("#user_role_update_input").val($(this).attr("edit-Role"));
        $("#user_dept_update_input").val($(this).attr("edit-deptId"));
        $("#dept_id_update_input").val($(this).attr("edit-userDept"));
        $("#update_time_update_input").val($(this).attr("edit-updateTime"));
        $("#create_time_update_input").val($(this).attr("edit-createTime"));
        $("#update_name_add_input").val($(this).attr("edit-updateName"));
        $("#create_name_update_input").val($(this).attr("edit-createName"));
        $("#dr_update_input").val($(this).attr("edit-dr"));

        $("#empUpdateModal").modal("show");
        $("#emp_update_btn").click(function () {
            $.ajax({
                url: "http://localhost:17793/User/update",
                type: "GET",
                data: $("#empUpdateModal form").serialize(),
                success: function (result) {
                    $('#empUpdateModal').modal('hide');
                    build_emps_table(result);
                }
            });
        });


    });

    <!--新增员工-->
    function a1() {
        $("#empAddModal").modal("show")
        $("#emp_save_btn").click(function () {

            $.ajax({
                url: "http://localhost:17793/User/addAll",
                type: "POST",
                data: $("#empAddModal form").serialize(),
                success: function (result) {
                    $('#empAddModal').modal('hide');
                    build_emps_table(result);
                }
            });
        });

    }


</script>
</body>
</html>
